<template>
  <div class="echarts_6_container">
    <div id="echarts_6"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const stockEcharts = () => {
  var chartDom = document.getElementById('echarts_6')
  var myChart = echarts.init(chartDom)

  var option = {
    tooltip: {
      show: true,
      formatter: '{b}<br>{c}'
    },
    legend: {
      orient: 'vertical',
      left: 190, // 图例位置
      y: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 10
      },
      itemHeight: 10,
      itemWidth: 10,
      formatter: function (name) {
        var data = option.series[0].data //获取series中的data
        var total = 0
        var tarValue
        for (var i = 0, l = data.length; i < l; i++) {
          total += data[i].value
          if (data[i].name == name) {
            tarValue = data[i].value
          }
        }

        if (name.length > 5) {
          name = name.slice(0, 5) + '...'
        }
        return name + ' ' + ' ' + tarValue
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        center: [100, 67],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          normal: {
            show: false,
            position: 'inside',
            formatter: '',
            textStyle: {
              fontSize: 9, // 环形图上的字体大小
              color: '#fff'
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            name: 'text1',
            value: 12,
            itemStyle: {
              color: '#60cda0'
            }
          },
          {
            name: 'test2',
            value: 30,
            itemStyle: {
              color: '#006cff'
            }
          },
          {
            name: 'test3',
            value: 40,
            itemStyle: {
              color: '#1d9dff'
            }
          },
          {
            name: 'test4',
            value: 22,
            itemStyle: {
              color: '#32c5e9'
            }
          },
          {
            name: 'test5',
            value: 33,
            itemStyle: {
              color: '#0c3375'
            }
          }
        ]
      }
    ]
  }

  myChart.resize()
  myChart.setOption(option)
}

onMounted(() => {
  stockEcharts()
})
</script>
<style lang="less">
.echarts_6_container {
  #echarts_6 {
    background-color: #091c36;
    width: 350px;
    height: 130px;
  }
}
</style>
